const { createRoot } = ReactDOM;
const {  Space, Table, Button ,Drawer,Input } = antd;
const {  useState  } = React;;
const App = () => {
  const [open, setOpen] = useState(false);
  const [setting, setSetting] = useState("");
  const [data, setData] = useState([]);
  const login = ()=>{
      var info = JSON.parse(setting)
      
  }
  const run = (row)=>{
     
  }
  const columns = [
  {
    title: '操作',
    key: 'action',
    render: (_, row) => ( <Button type="primary" onClick={()=>{ run(row) }}>运行</Button>),
  },

  {
    title: '项目路径',
    dataIndex: 'url',
    key: 'url',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '执行动作',
    dataIndex: 'js',
    key: 'js',
  },
  
]; 
   
  return (
    <>
     
<Space wrap>
    <Button type="primary" onClick={()=>{  login(); }}>登录</Button>
    <Button onClick={()=>{  setOpen(true); }}>设定</Button>
</Space>

     
 <Drawer title="同步设定" placement="right" onClose={()=>{  setOpen(false); }} open={open}>

    
<Space direction="vertical" >
<Input.TextArea rows={10} value={setting}  onChange={(e)=>{ setSetting(e.target.value)}} style ={{ width:'100%' } }/>
      <Button type="primary" onClick={()=>{ setData(JSON.parse(setting).list)}}>保存</Button>
</Space>
 
 </Drawer>
 
<Table columns={columns} dataSource={data} />    
    </>
  );
}; 
createRoot(mountNode).render(<App />);
